<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../../lib/dojo/dijit/themes/tundra/tundra.css">
        <link rel="stylesheet" type="text/css" href="../../lib/dojo/dojo/resources/dojo.css">
        <script src="../../lib/dojo/dojo/dojo.js" data-dojo-config="isDebug: true,parseOnLoad: true"></script>
        <script type="text/javascript">
            dojo.require("dojox.widget.AnalogGauge");
            dojo.require("dojox.widget.gauge.AnalogArrowIndicator");

            function init() {
                var gauge;
                var ranges1 = [{
                        low: 5,
                        high: 10,
                        hover: '5 - 10'
                    },
                    {
                        low: 10,
                        high: 20,
                        hover: '10 - 20'
                    },
                    {
                        low: 20,
                        high: 30,
                        hover: '20 - 30'
                    },
                    {
                        low: 30,
                        high: 40,
                        hover: '30 - 40'
                    },
                    {
                        low: 40,
                        high: 50,
                        hover: '40 - 50'
                    },
                    {
                        low: 50,
                        high: 60,
                        hover: '50 - 60'
                    },
                    {
                        low: 60,
                        high: 70,
                        hover: '60 - 70'
                    },
                    {
                        low: 70,
                        high: 75,
                        hover: '70 - 75'
                    }];
                gauge = dojo.byId('defaultGauge');
                gauge = new dojox.widget.AnalogGauge({
                    id: "defaultGauge",
                    width: 300,
                    height: 200,
                    cx: 150,
                    cy: 175,
                    radius: 125,
                    ranges: ranges1,
                    minorTicks: {
                        offset: 125,
                        interval: 5,
                        length: 5,
                        color: 'gray'
                    },
                    majorTicks: {
                        offset: 125,
                        interval: 10,
                        length: 10
                    },
                    indicators: [
                        new dojox.widget.gauge.AnalogArrowIndicator({
                            value: 32,
                            width: 3,
                            hover: 'Value: 32',
                            title: 'ค่าจริง'
                        }), new dojox.widget.gauge.AnalogLineIndicator({
                            value: 45,
                            color: '#D00000',
                            width: 3,
                            hover: 'Target: 45',
                            title: 'เป้าหมาย'
                        })]
                },
                gauge);
                gauge.startup();
            }
            dojo.addOnLoad(init);
        </script>
    </head>
    <body class="tundra">
        ตัวอย่าง A partial circle gauge with two indicators
        <div id="defaultGauge">
    </body>
</html>
